<template>
	<view class="left clearfix bai push-header-box" :class="{ 'header-minimized': isHeaderMinimized }">
		<view class="push-header-left left" v-show="!isHeaderMinimized">
			<uni-icons type="left" size="20" color="#666"></uni-icons>
		</view>
		<view class="push-title left clearfix" v-show="!isHeaderMinimized">
			发布任务
		</view>
		
		<!--步骤条-->
		<view class="push-form-buzhou left clearfix">
			<uni-steps :options="steps" active-icon="checkbox" :active="active" />
		</view>
	 </view>
	<view class="push-content left clearfix bai">
		
		<!--表单开始-->
		<view class="push-form-box left clearfix bai">
			
			<!--标题和内容-->
			<view class="push-form-contents left clearfix">
				
				<view class="push-form-item left clearfix">
					<view class="push-form-item-input left">
						<input placeholder="请输入标题" />
					</view>
				</view>
				
				<view class="push-form-item left clearfix">
					<view class="push-form-item-textarea left">
						<textarea placeholder="请在此输入内容"></textarea>
					</view>
				</view>
				
				<view class="push-form-item left clearfix">
					<view class="push-form-item-radio left">
						<view class="push-item-title left">报名后是否需要反选</view>
						<view class="push-item-inputs right">
							<radio-group @change="radioChange">
								<label class="radio" style="margin-right:1rem;"><radio value="r1" :checked="true" />需要</label>
								<label class="radio"><radio value="r2" />不需要</label>
							</radio-group>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="push-form-contents left clearfix">
				
				<view class="push-form-item left clearfix" style="border-bottom:1px solid #eee;" @click="this.$refs.level.open()">
					<view class="push-form-item-radio left" style="border:none;">
						<view class="push-item-title left">达人等级</view>
						
						<label class="right">
							<uni-icons type="right" size="15" color="#666"></uni-icons>
						</label>
						
						<view class="push-item-inputs right">
							请选择
						</view>
						
					</view>
				</view>
				
				<!--等级弹窗-->
				<uni-popup type="bottom" ref="level">
					<view class="alert-box left clearfix">
						<view class="alert-title left">
							<label class="left">达人等级</label>
							<label class="right" @click="this.$refs.level.close();"><uni-icons type="closeempty" size="20" color="#666"></uni-icons></label>
						</view>
						
						<view class="alert-content left clearfix">
							<view class="alert-item left" v-for="(item,index) in level">
								{{item}}
							</view>
						</view>
						
						<view class="alert-button-box left clearfix">
							<button>确定</button>
						</view>
					</view>
				</uni-popup>
				
				
				<view class="push-form-item left clearfix" style="border-bottom:1px solid #eee;">
					<view class="push-form-item-radio left" style="border:none;">
						<view class="push-item-title left">达人粉丝大于</view>
						<view class="push-item-inputs right">
							<input placeholder="输入0代表不限制" />
						</view>
					</view>
				</view>
				
				
				<view class="push-form-item left clearfix" style="border-bottom:1px solid #eee;" @click="openCity = true">
					<view class="push-form-item-radio left" style="border:none;">
						<view class="push-item-title left">达人地域要求</view>
						
						<label class="right">
							<uni-icons type="right" size="15" color="#666"></uni-icons>
						</label>
						
						<view class="push-item-inputs right">
							山东菏泽
						</view>
						
					</view>
				</view>
				
				<!--弹出选择地区-->
				<zmt-selectcity :openCity="openCity" @close="openCity = false"></zmt-selectcity>
				
				
				<view class="push-form-item left clearfix" style="border-bottom:1px solid #eee;">
					<view class="push-form-item-radio left" style="border:none;">
						<view class="push-item-title left">达人报名信息</view>
						
						<label class="right">
							<uni-icons type="right" size="15" color="#666"></uni-icons>
						</label>
						
						<view class="push-item-inputs right">
							请添加
						</view>
						
					</view>
				</view>
				
				
				<view class="push-form-item left clearfix" style="border-bottom:1px solid #eee;" @click="this.$refs.showShare.open()">
					<view class="push-form-item-radio left" style="border:none;">
						<view class="push-item-title left">分享设置</view>
						
						<label class="right">
							<uni-icons type="right" size="15" color="#666"></uni-icons>
						</label>
						
						<view class="push-item-inputs right">
							所有人
						</view>
						
					</view>
				</view>
				
				
				<!--分享弹窗-->
				<uni-popup type="bottom" ref="showShare">
					<view class="alert-box left clearfix">
						<view class="alert-title left">
							<label class="left">分享设置</label>
							<label class="right" @click="this.$refs.showShare.close();"><uni-icons type="closeempty" size="20" color="#666"></uni-icons></label>
						</view>
						
						<view class="alert-content left clearfix">
							<radio-group @change="radioChange">
								
								<view class="share-item left clearfix">
									<label>
									<!--左边部分-->
									<view class="share-left left clearfix">
										<text>所有人</text>
										<text>分享越多，招募越快。</text>
									</view>
									<view class="share-right right clearfix">
										<radio />
									</view>
									</label>
								</view>
								
								
								<view class="share-item left clearfix">
									<label>
									<!--左边部分-->
									<view class="share-left left clearfix">
										<text>仅允许创建者/管理员分享</text>
										<text>指定人群分享</text>
									</view>
									<view class="share-right right clearfix">
										<radio  />
									</view>
									</label>
								</view>
								
								
							</radio-group>
						</view>
						
						<view class="alert-button-box left clearfix" style="margin-top:2rem;">
							<button>确定</button>
						</view>
					</view>
				</uni-popup>
				
				
			</view>
			
			<!--联系二维码上传-->
			<view class="push-form-contents left clearfix">
				<view class="push-erweima-title left">
					<label style="color:red;">*</label><label style="font-weight:bold;margin-left:.5rem;">联系二维码</label><label style="color:#999;margin-left:.5rem;">(可上传个人码或群码，最多上传2张)</label>
				</view>
				
				<view class="push-erweima-upload left clearfix">
					<uni-file-picker limit="2"></uni-file-picker>
				</view>
			</view>
			
			
			
		</view>
		<view class="push-button left clearfix fixed">
			<button>下一步</button>
		</view>
		
	</view>
</template>
<style>
	body,page{background:url('https://mp-cf247fe4-80e2-458f-9533-66f43af127c0.cdn.bspapp.com/images/daren-bj.jpg') no-repeat center center;background-size:cover;background-attachment: fixed;}
</style>
<style scoped>
	.share-right{width:3rem;height:100%;text-align: center;line-height:4rem;}
	.share-left text:last-child{color:#999;font-size:.8rem;}
	.share-left text:first-child{margin-top:.5rem;font-size:600;font-size:.9rem;}
	.share-left text{width:calc(100% - 1rem);float:left;line-height:1.5rem;margin-left:1rem;}
	.share-left{width:70%;height:100%;}
	.share-item{width:100%;height:4rem;border-bottom:1px solid #eee;}
	.alert-button-box button{width:70%;margin-left:15%;margin-top:.5rem;background:#2979ff;color:#fff;line-height:3rem;border-radius: 1.5rem;}
	.alert-button-box{width:100%;height:3rem;margin-bottom:4rem;margin-top:1rem;}
	.alert-content{width:100%;margin-top:1rem;}
	.alert-item{width:28%;line-height:2.5rem;background:#e9e9eb;border-radius: 5px;margin-left:2.5%;margin-right:2.5%;margin-top:.5rem;margin-bottom:.5rem;text-align: center;font-size:.9rem;color:#444;}
	.alert-title label:last-child{margin-right:.5rem;}
	.alert-title label:first-child{font-size:.9rem;font-weight:500;margin-left:1rem;}
	.alert-title label{line-height:2rem;height:2rem;}
	.alert-title{width:100%;height:2rem;line-height:2rem;margin-top:.2rem;}
	.alert-box{width:100%;min-height:20rem;background:#fff;border-top:1px solid #efefef;border-radius: 10px 10px 0 0;margin-bottom:-3rem;}
	.push-button button{width:70%;margin-left:15%;margin-top:.5rem;background:#2979ff;color:#fff;line-height:3rem;border-radius: 1.5rem;}
	.push-button{width:100%;height:5rem;background:#fff;left:0;right:0;bottom:0;border-radius: 10px 10px 0 0;z-index:30;border-top:1px solid #efefef;}
	.push-erweima-upload{width:90%;margin-left:5%;margin-top:1rem;height:9rem;}
	.push-erweima-title{width:90%;height:1.5rem;line-height:1.5rem;margin-top:.5rem;padding-left:1rem;font-size:.9rem;}
	.push-content{padding-top:11.5rem;padding-bottom:8rem;}
	.push-form-item-radio label{line-height:3rem;height:3rem;margin-right:.5rem;margin-left:1rem;}
	.push-form-item-radio view:last-child input{line-height:3rem;height:3rem;font-size:.9rem;}
	.radio{margin-right:.5rem;font-size:.9rem;}
	.push-item-inputs{line-height:3rem;height:3rem;float:right;font-size:.9rem;}
	.push-item-title{float:left;line-height:3rem;height:3rem;font-size:.9rem;padding-left:1rem;}
	.push-form-item-radio{width:100%;height:2rem;border-top:1px solid #eee;padding-top:.5rem;}
	.push-form-item-textarea textarea{width:100%;height:100%;max-height:10rem;overflow: auto;margin-top:-1rem;font-size:.9rem;}
	.push-form-item-textarea{width:100%;height:10rem;}
	.push-form-item-input input{font-size:.9rem;}
	.push-form-item-input{width:100%;height:2rem;line-height:2rem;border-bottom:1px solid #eee;margin-top:.5rem;}
	.push-form-item{width:90%;min-height:4rem;margin-left:5%;margin-top:.5rem;}
	.push-form-contents{width:96%;margin-left:2%;margin-top:.5rem;background:#fff;min-height:10rem;border-radius: 10px;}
	.push-label{width:1rem;height:1rem;border-radius: 50%;border:1px solid #ccc;text-align: center;line-height:1rem;font-size:.7rem;}
	.push-step-item{width:40%;height:1rem;border-bottom:1px solid #2979ff;}
	.push-form-buzhou{width:96%;margin-left:2%;height:3.5rem;background:#fff;border-radius: 10px;padding-top:1rem;margin-top:1rem;}
	.push-form-box{min-height:10rem;}
	.push-title{line-height:2rem;text-align: center;font-size:1.2rem;font-weight:500;width:calc((100% - 4rem));text-align:center;margin-top:1.8rem;transition: all 0.3s ease;}
	.push-header-left{line-height:2rem;margin-left:1rem;margin-top:1.8rem;transition: all 0.3s ease;}
	.push-header-box{width:100%;height:6rem;margin-top:2rem;position:fixed;top:0;left:0;right:0;z-index:40;transition: all 0.3s ease;background-color: #fff;}
	.header-minimized{height:4.5rem;}
	.header-minimized .push-form-buzhou{margin-top:0.5rem;}
</style>

<script>
	export default {
		data() {
			return {
				openCity:false,
				formData:{
					title:'',
					content:''
				},
				steps:[
					{
						title:'基本信息'
					},
					{
						title:'任务金'
					},
					{
						title:'结算'
					}
				],
				active: 0,
				lastScrollTop: 0,
				isHeaderMinimized: false,
				scrollThreshold: 40,
				level:['不限','Lv.0','Lv.1','Lv.2','Lv.3','Lv.4','Lv.5','Lv.6','Lv.7','Lv.8'],
			}
		},
		onPageScroll(event) {
		    const currentScrollTop = event.scrollTop;
		
		    if (currentScrollTop > this.scrollThreshold && currentScrollTop > this.lastScrollTop) {
		      // 向下滚动且超过阈值，最小化头部
		      this.isHeaderMinimized = true;
		    } else if (currentScrollTop <= this.scrollThreshold) {
		      // 滚动到顶部区域，恢复完整头部
		      this.isHeaderMinimized = false;
		    }
		
		    // 更新上次滚动位置
		    this.lastScrollTop = currentScrollTop;
		},
		methods: {
			//跳转到添加页面
			navigatorToAdd(item,index){
				uni.navigateTo({
					url:'/pages/push/push-form?id='+item.id
				})
			},
			// 单选框变化处理
			radioChange(e) {
				console.log('选择的是：', e.detail.value);
			}
		}
	}
</script>